<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="permissionPage" >
        <el-form-item>
          <el-input v-model="permissionPage.keyword" placeholder="菜单名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="getPermissionPage">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="menuOpenFrom">新增</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <el-button type="danger" @click="permissionDeleteList" :disabled="this.selectData.length===0">批量删除</el-button>
<!--    主体-->
    <el-table
        :data="getPage.rows"
        stripe
        border
        @selection-change="handleSelectionChange"
        style="width: 100%">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          prop="id"
          label="id"
          width="80">
      </el-table-column>
      <el-table-column
          prop="name"
          label="权限名"
          width="130">
      </el-table-column>
      <el-table-column
          prop="url"
          label="地址"
          width="200">
      </el-table-column>
      <el-table-column
          prop="descs"
          label="排序"
          width="150">
      </el-table-column>
      <el-table-column
          prop="sn"
          label="唯一标识"
          width="250">
      </el-table-column>
      <el-table-column
          prop="parentName"
          label="父权限"
          width="150">
      </el-table-column>
      <el-table-column
          label="操作"
          width="180">
        <template slot-scope="scope">
          <el-button @click="permissionDelete(scope.row)" type="text" size="small">删除</el-button>
          <el-button @click="permissionAddFrom(scope.row)" type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

<!--    分页-->
    <el-pagination style="float:right;"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="permissionPage.pageIndex"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="getPage.total">
    </el-pagination>


<!--弹框-->
    <el-dialog title="添加/修改" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
      <el-form :model="permissionFrom" label-width="80px" :rules="addFormRules" ref="empFrom">
        <el-form-item label="权限名" prop="name">
          <el-input v-model="permissionFrom.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="permissionFrom.url"></el-input>
        </el-form-item>
        <el-form-item label="排序">
          <el-input v-model="permissionFrom.descs"></el-input>
        </el-form-item>
        <el-form-item label="唯一标识">
          <el-input v-model="permissionFrom.sn"></el-input>
        </el-form-item>
        <el-form-item label="上级菜单">
          <el-select v-model="permissionFrom.parent_id" clearable value-key="id" placeholder="请选择">
            <!--下拉选项
              :key=""  //唯一标识
              :label 选择之后展示到选择框中的值
              :value 选中之后绑定给模型层的值  如果要绑定对象给模型层 有一个大坑
                 必须要写  value-key="id"
            -->
            <el-option
                v-for="item in permissionParent"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="permissionSave" :loading="addLoading">提交</el-button>
      </div>
    </el-dialog>
  </section>
</template>

<script>
import {batchRemoveUser} from "../../api/api";

export default {
  name:"Department",
  data() {
    return {
      getPage:{
        total: 10,
        rows:[]
      },
      permissionPage:{
        pageSize:10,
        pageIndex:1,
        keyword:null
      },
      //获取选择的ids
      selectData:[],//列表选中列
    //  是否打开弹框
      dialogFormVisible:false,
    //  加载
      addLoading: false,
    //  添加或者修改页面数据
      permissionFrom:{
        id:null,
        name:"",
        url:"",
        descs:"",
        sn:"",
        parent_id:null,
        parentName:""
      },
    //  一级权限
      permissionParent:[],
    //输入规则
      addFormRules: {
        username: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ]
      }
    }
  },
  methods:{
    //批量删除
    permissionDeleteList(){
      this.$confirm('确认删除选中记录吗？', '提示', {
        type: 'warning'
      }).then(() => {
        this.addLoading = true;
        this.$http.patch("/permission",this.selectData)
          .then(res =>{
            res =res.data;
            if (res.code==200){
              this.$message({
                message: res.msg,
                type: 'success'
              });
              this.addLoading = false;
              this.getPermissionPage();
            }else {
              this.$message({
                message: res.msg,
                type: 'error'
              });
              this.addLoading = false;
            }
          }).catch(res =>{
          this.$message({
            message: "网络异常",
            type: 'error'
          });
        })
      }).catch(() => {
        this.$message({
          message: '已取消删除',
          type: 'info'
        });
      });
    },
    //提交添加或者修改
    permissionSave(){
      this.$http.post("/permission",this.permissionFrom)
          .then(res =>{
            if (res.data.code==200){
              this.dialogFormVisible = false;
              this.addLoading = false;
              this.$message({
                type: 'success',
                message: res.data.msg
              });
            //  刷新页面
              this.getPermissionPage();
            }else {
              this.$message({
                type: 'error',
                message: res.data.msg
              });
            }
          })
          .catch(res =>{
            this.$message({
              type: 'error',
              message: "未知错误"
            });
          });
    },
    //  获取到一级权限
    getPermissionParent(){
      this.$http.get("/permission/Level")
          .then(res => {
            res = res.data;
            if (res.code == 200){
              this.permissionParent = res.data;
            }
          }).catch(res => {
        this.$message({
          type: 'error',
          message: "未知错误"
        });
      });
    },
    //打开弹框添加部门
    menuOpenFrom(){
      this.dialogFormVisible = true;
      this.permissionFrom ={
        id:null,
        name:"",
        url:"",
        descs:"",
        parent_id:null,
        parentName:"",
        sn:""
      };
    //  获取到一级权限
        this.getPermissionParent();
    },
    //打开弹框修改部门
    permissionAddFrom(row){
      this.dialogFormVisible = true;
      //获取到一级权限
      this.getPermissionParent();
      this.permissionFrom = row;
    },
    //删除某行数据
    permissionDelete(row){
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let id = row.id;
        this.$http.delete("/permission/"+id)
            .then(res =>{
              if (res.data.code==200){
                this.$message({
                  type: 'success',
                  message: res.data.msg
                });
                this.getPermissionPage()
              }else {
                this.$message({
                  type: 'error',
                  message: res.data.msg
                });
              }
            })
            .catch(res =>{
              this.$message({
                type: 'error',
                message: "网络异常，请稍后在使"
              });
            })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //多行选择
    handleSelectionChange(val){
      let ids = val.map(val => val.id);
      this.selectData = ids;
    },
    handleSizeChange(val){
      this.permissionPage.pageSize = val;
      this.permissionPage.pageIndex = 1;
      console.log(this.permissionPage);
      this.getPermissionPage();
    },
    handleCurrentChange(val){
      console.log(val);
      this.permissionPage.pageIndex = val;
      this.getPermissionPage();
    },
    getPermissionPage(){
      console.log(this.permissionPage)
      this.$http.post("/permission/page",this.permissionPage)
        .then(result=>{
          result = result.data;
          console.log(result)
          this.getPage = result.data;
          console.log(this.getPage);
        })
        .catch(result=>{
          alert("失败");
        });
    }
  },
  mounted(){
    this.getPermissionPage();
  }
}
</script>

<style scoped>
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand{
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
